<template>
	<view class="container">
		
		<view class="userinfo-box2" style="position: relative; height: 200px;">
			<image style="width: 100%;height: 360rpx;" src="@/static/images/ui-20/1.png"></image>
			<view class="order_detail" @click="navToUrl('/pages/goods/orders')">兑换记录</view>
			<view class="jifen">
				<view class="img"></view>
				<view>
					<view class="jifen_tit">我的积分</view>
					<view class="count">{{ userinfo.jifen }}</view>
				</view>
			</view>
			<view class="getmore" @click="navToUrl('/pages/tasks/index')"></view>
		</view>	
		  <!-- <view class="card-box pb3 pr3 pl3 box-shadow"> -->
			<!-- <view class="flex row nowrap justify-center">
			  <view class="title-1">好物热兑榜</view>
			</view> -->
<!-- 		<view class="main_plate">
			<view class="wallet_top">
				<view class="my_wal_l"></view>
				<view class="my_wal_tit">好物热兑榜</view> 
			</view>
			
			<view  style="align-items:center; display: table-row;">
			  <view v-for="(item, index) in topsales" :key="index"  style="width: 43vw;margin-bottom: 20upx;padding-top: 20upx;float:left;padding: 0 20px;">
				<view class="flex">
				  <view class="img-box" :style="'background-image: url(' + weburl+item.photo + ');'"></view>
				  <view class="flex column justify-start">
					<view class="nomber-box nomber1">NO.{{ index + 1 }}</view>
					<view class="name-box">{{ item.title }}</view>
				  </view>
				</view>
			  </view>
			</view>
		</view> -->
		
		<view class="main_plate">
			<view v-for="(item, index) in tabs"  @click="changePart(index)" :class="chosePart == index ? 'grid_part grid_active' : 'grid_part'">
				{{item.name}}
			</view>
		</view>
		
		<!-- <view class="line">
			<v-tabs v-model="current" :line-color="lineColor" :pills="true" height="50px" color="#FFF" bgColor="#fa451ae0" :active-color="lineColor" :tabs="tabs" @change="changeTab" ></v-tabs>
		</view>		 -->
		<view class="goods-wrapper" >
		  <view class="goods-wrapper-2">
			  <view class="goods-item" v-for="(item, index) in list" @click="navToUrl('/pages/goods/detail?code=' + item.id)" >
				  <view class="goods-img">
					  <image style="width: 90%; height: 130px;" :src="weburl + item.photo" ></image>
				  </view>
				  <view class="goods-price"><text>{{item.price}}</text>积分</view>
				  <view class="title">{{item.title}}</view>
				  <!-- 	<view class="goods-stock">
							{{item.sales}}人兑换
						</view> -->
				  <button class="exchange-button" @click="navigateToDetail(item.id)"></button>
			  </view>
		  </view>
			<view style="text-align: center" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
		


		<!-- <tabBar :currentPage="currentPage"></tabBar> -->
	</view>
</template>

<script>
	//import tabBar from '@/components/tabBar/tabBar.vue';
	//import vTabs from '@/components/v-tabs/v-tabs.vue';
	import YiChanMovableArea from '@/components/yichan-movable-area/yichan-movable-area.vue';
	
	export default {
		components: {
			//tabBar,
			//vTabs,
			YiChanMovableArea
		},
		
		data() {
			return {
				modalName: null,
				//currentPage:'/pages/goods/index',
				loading: !1,
				loaded: !1,
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				userinfo:[],
				list: [],
				topsales:[],
				page: 1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: true,
				current: 0,
				lineColor:"#FFF",
				tabs: [],
				avatar:'/static/icon_avatar.png',
				chosePart: 0,
			}
		},

		onLoad: function (option) {
			this.getUserInfo();
			this.getData();
		},
		onReachBottom() {
			// console.log("onReachBottom");
			if (this.page >= this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.getData();
				}, 300);
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.list = [],
			this.loadMoreText = "加载更多",
			setTimeout(() => {
				this.getData();
				this.getUserInfo();
			}, 300);
		},
		methods: {
			  navigateToDetail(id) {
			    uni.redirectTo({
			      url: '/pages/goods/detail?code=' + id
			    });
			  },
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			changePart: function(index){
				console.log('type:',index)
				this.chosePart = index
				this.current = index
				this.page =1;
				this.lastPage = 0,
				this.list = [],
				this.loadMoreText = "加载中...",
				setTimeout(() => {
					this.getData();
				}, 300);
			},
			changeTab(index) {
				  this.page =1;
				  this.lastPage = 0,
				  this.list = [],
				  this.loadMoreText = "加载中...",
				  setTimeout(() => {
				  	this.getData();
				  }, 300);
			},
			loadBanners: function() {
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=goods','timestamp='+timestamp]);
				this.helper.req({
					api:"getBanners",
					timestamp:timestamp,
					data:{type:'goods'},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					// console.log(res);
					this.carouselList = res.data.data.list;
					this.swiperLength = this.carouselList.length;
				})
			},
			getUserInfo:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
					this.helper.req({
						api:"getUserInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
						this.userinfo = res.data.data.userinfo;
						if(this.userinfo.avatar){
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				}else{
					uni.hideLoading();
				}
			},
            getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				let page = this.page;
				let classly = parseInt(this.current+1);
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['page='+page,'classly='+classly,'timestamp='+timestamp]);
				this.helper.req({
					api:"getGoodsList",
					timestamp:timestamp,
					data:{page,classly},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					let current_page = res.data.data.list.current_page;
					let last_page = res.data.data.list.last_page;
					this.page = current_page + 1;
					this.lastPage = last_page;
					this.list = this.list.concat(res.data.data.list.data);
					this.tabs = res.data.data.class
					if (this.page >= this.lastPage) {
						this.loadMoreText = "没有更多数据了!"
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
            },
			swiperChange: function(e) {
				var t = e.detail.current;
				this.swiperCurrent = t;
			},
			navToDetails: function(e) {
				return uni.navigateTo({
					url: "/pages/goods/detail?code=" + e.id
				});
			},
			onImageLoad: function(e, t) {
				this.$set(this[e][t], "loaded", "loaded")
			},
			onImageError: function(e, t) {
				this[e][t].icon = "/static/errorImage.jpg"
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods-wrapper {
		padding: 3vw;
		margin: 0 2vw;
		background: #f3f8ff;
		color: #343535;
		.goods-wrapper-2 {
			display: flex;
			flex-wrap: wrap;text-align: center;justify-content: space-between;
		}
	}
	page {
		background-color: #deeafe;
	}
	.container{
		// background-image: url('@/static/images/person/center-bg.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}
	
	.p1 {
	  padding: 6px;
	}
	
	.p2 {
	  padding: 10px;
	}
	
	.p3 {
	  padding: 20px;
	}
	
	.pt1 {
	  padding-top: 4px;
	}
	
	.pt3 {
	  padding-top: 20px;
	}
	
	.pl2 {
	  padding-left: 10px;
	}
	.pr2 {
	  padding-right: 10px;
	}
	
	.pl3 {
	  padding-left: 20px;
	}
	
	.pr3 {
	  padding-right: 20px;
	}
	
	.pb3 {
	  padding-bottom: 20px;
	}
	
	.flex {
	  display: flex;
	}
	
	.column {
	  flex-direction: column;
	}
	
	.row {
	  flex-direction: row;
	}
	
	.nowrap {
	  flex-wrap: nowrap;
	}
	
	.wrap {
	  flex-wrap: wrap;
	}
	
	.align-center {
	  align-items: center;
	}
	
	.align-start {
	  align-items: start;
	}
	
	.align-end {
	  align-items: end;
	}
	
	.justify-between {
	  justify-content: space-between;
	}
	
	.justify-center {
	  justify-content: center;
	}
	
	.justify-start {
	  justify-content: start;
	}
	
	.justify-end {
	  justify-content: end;
	}
	
	.font-24 {
	  font-size: 1.2rem;
	}
	
	.font-bold {
	  font-weight: bold;
	}
	
	.c-white {
	  color: #ffffff;
	}
	
	.p-relative {
	  position: relative;
	}
	
	.p-absolute {
	  position: absolute;
	}
	
	.p-fixed {
	  position: fixed;
	}
	
	.main_plate{
		margin: 0 2vw;
		background: url("@/static/images/ui-20/bar-bg.png");
		background-size: 100% 100%;
		display: flex;
		.wallet_top{
			height: 50px;
			line-height: 36px;
			// padding-bottom: 10px;
			// border-bottom: 1px solid #DDD;
			position: relative;
		}
		.wallet_top{
			.my_wal_l{
				width: 4px; 
				height: 18px; 
				border-radius: 4px;
				float:left;
				margin: 16px 4px 20px;
			}
			.my_wal_tit{
				width: 360px;
				height: 50px;
				font-size: 18px;
				font-weight: 600;
				padding: 8px;
				float:left;
				color:#353535;
			}
		}
	}
	
	.grid_active{
		color: #7AE6FF;
	}

	
	.goods-item {
	  width: 48%;
	  padding: 10px 1%;
	  border-radius: 20rpx;
	  margin-bottom: 10px;
	  box-sizing: border-box;
	  box-shadow: 0 0 20upx rgba(0, 0, 0, .1);
	  position: relative;
	  background-color: #fff;
		.title {
			font-size: 26rpx;
		}
	}
	.goods-img{
		width: 100%; 
		height: 140px;
		// background-color: #73f9f4;
	 //    opacity: 0.3;
	 //    border-radius: 10px;
		 image{
			 height: 130px;
		 }
	}
	.goods-price{
		color: #b79857;
    //padding-left: 3.73vw;
		font-size: .8rem;
	   text {
		   font-weight: 700;
		   font-size: 1rem;
		   margin-right: 5rpx;
	   }
    margin-top: 1.07vw;
	}
	.goods-stock{
		background: #FFDED7;
		margin-top: 1.07vw;
		border-radius: 1.07vw 1.07vw 2.13vw;
		width: 100%;
		font-size: 20rpx; 
		color: #999; 
		text-align: center;
	}
	.exchange-button{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5px;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2;
		border-radius: 20px;
		overflow: hidden;
		color: #FFF;
		background: url("@/static/images/ui-20/4.png");
		cursor: pointer;
		width: 100rpx;
		height: 50rpx;
		background-size: 100% 100%;
	}
	.jifen{
		position: absolute;
		top: 4vw;
		left: 40vw;
		padding: 10px;
		font-size: 14px;
		line-height: 30px;
		text-align: center;
		
		p{
			font-size: 26px;
			line-height: 30px;
			font-weight: bold;
		}
	}
	.getmore{
		position: absolute;
		width: 300rpx;
		height: 80rpx;
		right: calc(50% - 150rpx);
		bottom: 20rpx;
		font-size: 15px;
		font-weight: bold;
		line-height: 28px;
		text-align: center;
		background: #fff;
		color:#21274B;
		border-radius: 20px 0 0 20px;
		background: url("@/static/images/ui-20/2.png");
		background-size: 100% 100%;
	}
	
	.grid_part{
		text-align: center;
		font-size: 28rpx;
		padding: 22rpx 0;
		color:#353535;
		flex: 1;
	}
	.grid_active{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/active.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:first-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/left.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	.grid_active:last-child{
		color: #4f8dfd;
		background: url("@/static/images/ui-20/right.png") no-repeat bottom;
		background-size: 100% 100%;
	}
	
	.userinfo-box2{
		position: relative;
		color: #fff;
		// margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		
		.jifen{
			position: absolute;
			left: 0;
			display: flex;
			align-items: center;
			color: #353534;
			text-align: left;
			gap: 20rpx;
			.img {
				width: 200rpx;
				height: 200rpx;
				background: url("@/static/images/ui-20/3.png");
				background-size: 180%;
			}
			.jifen_tit {
				font-size: 26rpx;
			}
			.count {
				font-size: 48rpx;
				font-weight: bold;
			}
		}
		
		.vip-box{
			position: absolute;
			left: 0;
			top: 40rpx;
			z-index: 99;
		}
		.vip-text{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center
		}
		.user-box{
			display: flex;
			align-items: center;
			position: absolute;
			justify-content: space-around;
			width: 100%;
			left: 0;
			top: 160rpx;
			z-index: 99;
			.avator{
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 50%;
			}
			.info{
				width: 360rpx;
			}
			// .jifen{
			// 	font-weight: bold;
			// }
		}
		.tips-box{
			position: absolute;
			left: 0;
			top: 260rpx;
			z-index: 99;
			display: flex;
			width: 100%;
			padding: 20rpx 30rpx 0;
			justify-content: space-between;
			border-top: 10rpx solid #fff;
		}
	}
	.userinfo-box{
		padding: 20rpx;
		background-color: #0d78f7;
		color: #fff;
		.img-box{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #EEE
		}
		
		.tag{
			background-color: #74b7f4;
			padding: 0 10rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
			font-size: 24rpx;
		}
	}
	.vip-card-box {
		height: 260upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10;
		display: flex; /* 使用Flexbox布局 */
		justify-content: space-between; /* 在容器内平均分配空间，实现横向排列 */
	}
	.img-single {
		width: 100%;
		height: 165upx;
		margin: 0upx 0upx
	}
	.img-wrapper {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden
	}
	.img {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		z-index: 9;
		opacity: 1;
		width: 100%;
		height: 100%;
	}
	.user-info{
	  display: flex;
	  flex-direction: column;
	  align-items: center; /* 垂直居中文本内容 */
	}
	.cu-card{
		// border-top: solid 1px #e06c6a;
		display: flex;
		flex-wrap: wrap;
	}
	.cu-card > .cu-item{
		margin: 20upx;
	}
	.bg-blue{
		background-color: #0F51A0;
	}
	.cu-card > .cu-item{
		margin: 10upx;
	}
	.cu-avatar.lg {
	    width: 180upx;
	    height: 90upx;
	    background-color: #fff;
	}
	.cu-list.menu-avatar > .cu-item > .cu-avatar{
		left: 10upx;
	}
	.cu-list.menu-avatar > .cu-item .content{
		left: 210upx;
	}
	
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 15px 0;
	}
/* card-box */
.card-box {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 21px #ddd;
}

/* title-1 */
.title-1 {
  padding: 6px 60px;
  background: url("/static/images/title_bg.png") no-repeat top center;
  background-size: contain;
  font-size: 0.8rem;
  color: #FB461B;
}

/* hot-product-box */
.hot-product-box {
  padding-top: 20px;
  flex-wrap: wrap;
}

/* img-box */
.img-box {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 4px;
}

/* nomber-box */
.nomber-box {
  position: relative;
  padding: 4px 0 4px 20px;
  font-weight: bold;
  color: #999999;
}

.nomber-box::before {
  display: block;
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  top: -1px;
  left: -3px;
}

.nomber-box.nomber1 {
  color: #FD960C;
}

.nomber-box.nomber1::before {
  background-image: url('/static/images/exchange/rank_1.png');
}

.nomber-box.nomber2 {
  color: #829FBA;
}

.nomber-box.nomber2::before {
  background-image: url('/static/images/exchange/rank_2.png');
}

.nomber-box.nomber3 {
  color: #CA7425;
}

.nomber-box.nomber3::before {
  background-image: url('/static/images/exchange/rank_3.png');
}

/* name-box */
.name-box {
  font-size: 0.7rem;
  padding-right: 6px;
  color: #fff;
}
.order_detail{
    position: absolute;
    width: 25vw;
		height: 4vh;
		display: flex;
	align-items: center;
	justify-content: center;
    top: 16px;
    right: 2vw;
    //padding: 0px 10px;
    font-size: 24rpx;
    font-weight: bold;
}
</style>
